<template>
  <div class="swiper-container ticket"  >
    <!-- 轮播背景，根据图片切换 -->
    <div  :style="{ 'background-image': 'url(' + cinemaTicket.showData.movies[movieIndex].img.replace('w.h','71.100')+ ')'}" class="post-bg"></div>
    <div class="post-bg-filter"></div>
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

export default {
  props: ['movieIndex', 'cinemaTicket'],
  mounted () {
    this.$nextTick(() => {
      let self = this
      new Swiper('.ticket', {
        initialSlide: this.movieIndex,
        slidesPerView: 4.5,
        slideToClickedSlide: true,
        spaceBetween: 0,
        centeredSlides: true,
        loop: false,
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        on: {
          slideChangeTransitionEnd (swiper) {
            self.$emit('swiper-change-index', this.activeIndex)
          },
          tap (e) {

          }

        }
      })
    })
  }
}
</script>
<style scoped>
.post-bg-filter {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #40454d;
    opacity: .55;

}
.post-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    -webkit-filter: blur(30px);
    filter: blur(30px);
    background-position-y: 40%;
    /* transform: translateZ(0); */
    transition:background-image 0.3s;
}
</style>
